<template>
    <Popup v-model="showAreaSelect" :close-on-click-overlay="false" position="bottom">
        <Area
            title="选择地区"
            :columns-num="2"
            :area-list="AreaData"
            :value="defaultValue"
            @confirm="ensure"
            @cancel="close"
        />
    </Popup>
</template>

<script>
import { Area, Popup } from 'vant';
import { TechPopup } from '@components/base';
import AreaData from '@constants/area';
export default {
    name: 'SelectAreaValue',
    components: {
        Area,
        Popup,
    },
    props: {
        defaultValue: String,
    },
    computed: {},
    data() {
        return {
            AreaData,
            showAreaSelect: false,
        };
    },
    mounted() {
    },
    methods: {
        show() {
            this.showAreaSelect = true;
        },
        close() {
            this.showAreaSelect = false;
        },
        ensure(arr) {
            const whiteList = ['110100', '120100', '310100', '500100', '500200', '810000', '810100', '810200', '810300', '820000', '820100', '820201', '820101'];
            let _searchVal = `${arr[0].name}${arr[1].name}`;
            if (whiteList.indexOf(`${arr[1].code || ''}`) > -1) {
                _searchVal = `${arr[0].name}`;
            }
            this.$emit('result', {
                code: arr[1].code,
                searchVal: _searchVal,
                showVal: arr[1].name,
            });
            this.close();
        },
    },
};
</script>

<style lang="less">

</style>

